// 全局样式
.app-wrapper {
  min-width: 1280px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .app-header {
    padding: 0 20px;
    height: 70px;
    flex: 0 0 70px;
    background-color: #1c8ac7;
  }

  .app-container {
    flex: 1;
    width: 100%;
    display: flex;
    height: calc(100% - 70px);

    .left-warp {
      height: 100%;
      display: flex;
    }

    .app-main {
      flex: 1;
      background: #ffffff;
      overflow-y: auto;

      .app-inner {
        padding: 10px;
        height: calc(100% - 30px);

        > div {
          height: 100%;
        }
      }
    }
  }
}

// 头部样式
.topHeader {
  width: 100%;
  height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .logo-title {
    display: flex;
    color: #ffffff;
    align-items: center;

    .title {
      width: 435px;
      font-size: 24px;
      font-weight: 600;
      color: #ffffff;
    }
    img {
      width: 55px;
      height: 55px;
    }
  }



  .rightHeader {
    display: flex;
    color: #ffffff;
    align-items: center;

    .user-name {
      margin: 0 10px;
    }

    .header-menu {
      display: flex;
      align-items: center;

      li {
        padding: 0 15px;
        border-left: 1px solid #7e9081;
        cursor: pointer;
      }
    }
  }
}

// 一级菜单样式
.left-header {
  background: #1c8ac7;
  height: 70px;

  ul {
    height: 70px;
    background: #1c8ac7;
    display: flex;
    flex-direction: row;

    .nav-item {
      height: 60px;
      display: inline-block;
      color: #ffffff;
      position: relative;
      border-bottom: none;

      .el-menu-item {
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .iconfont {
          font-size: 23px;
          height: 35px;
          line-height: 40px;
          color: #ffffff;
        }

        b {
          font-size: 16px;
          height: 35px;
          line-height: 30px;
          color: #ffffff;
        }
      }

      &.is-active {
        border-bottom: none;
        background: #2aa5ec;
        color: #ffffff;
      }
    }
  }
}

// 左侧二级菜单
.sidebar-container {
  width: 220px;
  height: 100%;

  .sidebar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1590d5;
    font-size: 18px;
    margin-bottom: 25px;

    .iconfont {
      color: #1590d5;
      font-size: 18px;
      margin-right: 5px;
    }

  }

  .el-menu {
    border-right: 0;
    flex: 1;
    box-shadow: 0 2px 12px 0 rgba(34, 24, 21, 0.16);
    overflow: auto; // 左侧滚动条设置

    .router-link-exact-active {
      .el-menu-item {
        background: rgba($color: #08caff, $alpha: 0.2);
        color: #333953;
      }

      .iconfont {
        width: 60px;
        height: 60px;
        font-size: 24px;
        color: #ffffff;
        position: absolute;
        left: -60px;
        background: rgba($color: #1c8ac7, $alpha:1.0);
        text-align: center;
      }
    }

    .router-link-active {
      .el-menu-item {
        background: rgba($color: #08caff, $alpha: 0.2);
        color: #333953;
      }

      .iconfont {
        width: 60px;
        height: 60px;
        font-size: 24px;
        color: #ffffff;
        position: absolute;
        left: -60px;
        background: rgba($color: #1c8ac7, $alpha:1.0);
        text-align: center;
      }
    }

    .el-menu-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      height: 50px;
      line-height: 50px;
      width: 100%;


      &.is-active {
        background: rgba($color: #08caff, $alpha: 0.2);
        color: #333953;

        .iconfont {
          width: 60px;
          height: 60px;
          font-size: 24px;
          color: #ffffff;
          position: absolute;
          left: -60px;
          background: rgba($color: #1c8ac7, $alpha:1.0);
          text-align: center;
        }

        span {
          font-family: MicrosoftYaHei-Bold, serif;
          font-size: 14px;
          color: #333953;
        }

        i {
          font-size: 15px;
          color: #333953;
        }
      }
    }

    .el-submenu {
      padding-left: 0 !important;

      // .el-menu {
      //   background-color: rgba($color: #E3E2E2, $alpha: 0.2);
      //   // border-bottom: solid 2px #1C8AC7;
      // }
      .el-submenu__title {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        height: 50px;
        line-height: 50px;
        color: #333953;
        background-color: rgba($color: #E3E2E2, $alpha: 0.5);
        border-bottom: 1px solid #eeeeee;

        span {
          font-size: 15px;
          font-weight: bold;
          color: #333953;
        }

        i {
          font-size: 15px;
          font-weight: bold;
          color: #333953;
        }
      }

      &.is-active {
        .el-submenu__title {
          color: #333953 !important;
          background: rgba($color: #E3E2E2, $alpha: 1);

          .iconfont {
            width: 60px;
            height: 60px;
            font-size: 24px;
            color: #ffffff;
            position: absolute;
            left: -60px;
            background: rgba($color: #1c8ac7, $alpha:1.0);
            text-align: center;
          }

          span {
            font-size: 15px;
            color: #333953;
          }

          i {
            font-size: 15px;
            color: #333953;
          }
        }
        .el-menu {
          background-color: rgba($color: #E3E2E2, $alpha: 0.2);
          // border-bottom: solid 2px #1C8AC7;
        }
      }

      &.is-opened {
        .el-menu {
          // background-color: #fbfbfb;
          border-right: 0;

          .nest-menu {
            width: 80%;
            margin: 0 auto;
            border-bottom: dotted 1px #929292;

            .iconfont {
              display: none;
            }

            .el-menu-item {
              min-width: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0 !important;
              height: 40px;
              line-height: 40px;

              .iconfont {
                font-size: 24px;
                color: #ffffff;
                position: inherit;
              }

              &.is-active {
                background: rgba(0, 0, 0, 0);

                &:after {
                  width: 10px;
                  height: 10px;
                  border-top: 6px solid transparent;
                  border-left: 10px solid #1c8ac7;
                  border-bottom: 6px solid transparent;
                  position: absolute;
                  left: 3px;
                  top: 16px;
                  content: "";

                }

                span {
                  color: #1c8ac7;
                }

              }
            }
          }
        }
      }


    }
  }
}

.container-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;

  .searchWarp {
    padding: 15px 10px 0 10px;
  }
}

.tip {
  font-size: 16px;
  font-weight: bold;
  padding: 20px 10px 15px 10px;
  border-top: 1px solid #1590d5;
  letter-spacing: 2px;
  span {
    border-left: 5px solid #1590d5;
    padding-left: 15px;
  }
}

.tip-btn {
  position: relative;
}

.tip-btn-cont {
  position: absolute;
  top: -8px;
  right: 10px;
}


// 输入禁用样式
.lookStatus {
  .el-form-item__label {
    border-radius: 0;
    background: #e4e7ed;
    color: #1b1b1b;
  }

  .el-form-item__content {
    margin-right: -1px;
  }

  .el-input {
    &.is-disabled {
      .el-input__inner {
        background-color: rgba(0, 0, 0, 0) !important;
        border-radius: 0;
        color: #1b1b1b;
        cursor: inherit;
      }

      .el-icon-arrow-down {
        display: none;
      }

      .el-input-group__append {
        background: rgba(0, 0, 0, 0);
        border-radius: 0;
        color: #1b1b1b;
      }
    }
  }

  .el-select {
    &.is-disabled {
      .el-input__suffix {
        .el-select__caret {
          display: none !important;
        }
      }
    }
  }

  .el-textarea {
    &.is-disabled {
      .el-textarea__inner {
        background-color: rgba(0, 0, 0, 0) !important;
        border-radius: 0;
        color: #1b1b1b;
        cursor: inherit;
      }
    }
  }

  .el-range-editor {
    &.is-disabled {
      background-color: rgba(0, 0, 0, 0) !important;
      border-radius: 0;
      color: #1b1b1b;
      cursor: inherit;

      input {
        background-color: rgba(0, 0, 0, 0) !important;
        color: #1b1b1b;
        cursor: inherit;
      }
    }
  }
}

// 地图
.map-container-warp{
  width: 100%;
  height: calc(100vh - 100px);
  position: relative;
  #map {
    width: 100%;
    height: 100%;
    position: relative;
  }
}

.esriPopup .contentPane {
  padding: 0 !important;
}

.mapHoverTitle {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  color: #fff;
  font-weight: bold;
  background-color: #2aa5ec;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mapHoverContent {
  ul li {
    height: 30px;
    line-height: 30px;
    padding-left: 25px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/*地图chart图容器样式*/
.myInfoWindow {
  position: absolute;
  z-index: 888;
}

.dj_ie .myInfoWindow {
  border: 1px solid black;
}

.myInfoWindow .content {
  position: relative;
  .barChart {
    background-color: #f2f2f2;
  }
  .pieChart {
    .pieTooltip {
      display: none;
      width: 170px;
      height: 170px;
      position: absolute;
      left: 80px !important;
      color: #333 !important;
      font-size: 12px !important;
      span {
        font-size: 14px !important;
        font-weight: bold;
      }
    }
  }
}



// 弹窗
.el-dialog {

  .el-dialog__header {
    background-color: #2d89f9;
    color: #fff;
    padding: 10px 15px;

    .el-dialog__headerbtn {
      top: 15px;
    }

    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 15px 20px;
  }

}
.zuhegaodu{
  .el-dialog{
    height: calc(100% - 30vh);
    .el-dialog__body{
      height: calc(100% - 44px);
    }
  }
}
.pieTooltip{
  border-color: #ccc!important;
}
.tooltuli{
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
}
